import React, { Component } from 'react'

class Navbar extends Component {
    render() {
        return (
            <div style={{ background: "red", width: "200px" }}>
                <button onClick={() => {
                    // 调用父类传递的属性，其实这个属性是一个回调函数，可以直接执行
                    this.props.callback()
                }}>click</button>
                <span>Navbar</span>
            </div>
        )
    }
}

class Sidebar extends Component {

    render() {
        return (
            <div style={{ background: "yellow" }}>
                <ul>
                    <li>1111111</li>
                    <li>1111111</li>
                    <li>1111111</li>
                    <li>1111111</li>
                    <li>1111111</li>
                    <li>1111111</li>
                    <li>1111111</li>
                    <li>1111111</li>
                </ul>
            </div>
        )
    }
}

export default class App extends Component {
    state = {
        isSidebarShow: true,
    }
    render() {
        return (
            <div>
                <Navbar callback={this.handlerChildEvent} />
                {this.state.isSidebarShow && <Sidebar />}
            </div>
        )
    }
    // 该函数被子类通知调用
    handlerChildEvent = () => {
        this.setState({
            isSidebarShow : !this.state.isSidebarShow
        })
    }
}
